<template>
  <div class="upImage-wrap">
    <div class="images">
      <div v-lazy:background="item" v-for="(item,index) in imgs" :key="index">
        <van-icon class="closeImg" name="clear" size="20px" @click="closeImg(index)" />
      </div>
    </div>
   <van-uploader v-if="imgs.length < 6" :after-read="afterRead" />
  </div>
</template>

<script> 
import { Toast } from 'vant';
export default {
  name: 'UpImage',
  props: {
    images: [Array,String]
  },
  data(){
    return {
      imgs:[]
    }
  },
  created(){    
    this.imgs = this.$props.images || []
  },
  methods:{
    afterRead(file) {
      let up = new this.Utils;
      let data = new FormData();
      data.append('images',file.file);
      up.upLoad(data).then(r=>{
        this.imgs.push(r.data);
        this.upImages()
      }).catch(err=>{
        console.log(err);
      })
    },
    closeImg(index){
      this.imgs.splice(index,1);
      this.$toast('删除成功');
    },
    upImages(){
      this.$emit('upImages',this.imgs)
    }
  }
}
</script>
<style lang="less" scoped>
.upImage-wrap {
  .images {
    div {
      position: relative;
      display: inline-block;
      height: 7.1429rem;
      width: 7.1429rem;
      margin: 0.3571rem 0.7143rem;
      .closeImg {
        position: absolute;
        top: .25rem;
        right: .25rem;
      }
    }
  }
}
</style>
